<template>
    <div class="container" :style="'height: '+docheight+'px'">
        <leftcont></leftcont>
        <div class="righCont">
            <topcont></topcont>
            <div class="content" v-if="showData">
                <div class="setCont">
                    <div class="mainTop" style="margin-top:20px">
                        <div class="mainTitle">新增帖子</div>
                    </div>
                    <div class="formCont">
                        <el-form ref="form" label-width="80px">
                            <el-form-item label="选择身份">
                                <el-radio v-model="publisher" label="脱单小助手">脱单小助手</el-radio>
                                <el-radio v-model="publisher" label="报喜直通车">报喜直通车</el-radio>
                                <el-radio v-model="publisher" label="精选嘉宾">精选嘉宾</el-radio>
                            </el-form-item>
                            <el-form-item label="选择标签">
                                <el-radio v-model="label" label="脱单攻略">脱单攻略</el-radio>
                                <el-radio v-model="label" label="家长经验">家长经验</el-radio>
                            </el-form-item>
                            <el-form-item label="帖子类型">
                                <el-radio v-model="tieba_type" :label="1">图文</el-radio>
                                <el-radio v-model="tieba_type" :label="2">视频</el-radio>
                            </el-form-item>
                            <el-form-item label="按钮类型">
                                <el-radio v-model="button_type" :label="1">无按钮</el-radio>
                                <el-radio v-model="button_type" :label="2">开通会员</el-radio>
                                <el-radio v-model="button_type" :label="3">实名认证</el-radio>
                                <el-radio v-model="button_type" :label="4">编辑资料</el-radio>
                            </el-form-item>
                            <el-form-item label="视频地址">
                                <el-input
                                    placeholder="请输入视频地址"
                                    v-model="url">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="帖子状态">
                                <el-radio v-model="status" :label="1">正常</el-radio>
                                <el-radio v-model="status" :label="2">禁用</el-radio>
                            </el-form-item>
                            <el-form-item label="发帖内容" v-if="publisher!='精选嘉宾'">
                                <el-input
                                    type="textarea"
                                    :rows="8"
                                    placeholder="请输入内容"
                                    v-model="content">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="发帖内容" v-if="publisher=='精选嘉宾'">
                              <edit :defVal="noticeContent" @change="chageNotice"></edit>
                            </el-form-item>
                            <el-form-item label="帖子排序">
                                <el-input
                                    placeholder="请输入帖子排序"
                                    v-model="sort">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="发帖图片">
                                <def-up-img-more :propImg="imgArr" @successUpImg="getDetailImg"></def-up-img-more>
                            </el-form-item>
                            <el-form-item label="">
                                <btn value="确认发贴" @click="sendEditFn"></btn>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import leftcont from '@/components/leftCont.vue'
  import topcont from '@/components/topCont.vue'
  import btn from '@/components/public/btn.vue'
  import defUpImg from '@/components/public/defUpImg.vue'
  import defUpImgMore from '@/components/public/defUpImgMore.vue'
  import {sendEdit,sendShow} from "@/http/api"
  import edit from '@/components/public/edit.vue'

    export default {
      components: {edit,defUpImgMore,defUpImg,leftcont,topcont,btn},
      data() {
        return {
          showData:false,
          publisher:'脱单小助手',
          label:'脱单攻略',
          content:'',
          img:'',
          button_type:1,
          status:1,
          imgArr:[],
          sort:1,
          url:'',
          noticeContent:'',
        }
      },
      props: {},
      methods:{
        chageNotice(val){
          this.noticeContent = val
        },
        getDetailImg(arr){
            if(arr.length>0){
                let newArr = []
                for(let i = 0; i < arr.length; i++){
                    newArr.push(arr[i].img)
                }
                this.img = newArr.join(',')
            }else{
                this.img = ''
            }
        },
        sendEditFn(){
          var data = {
            tieba_id:this.$route.query.id,
            publisher:this.publisher,
            label:this.label,
            status:this.status,
            content:this.content,
            button_type:this.button_type,
            url:this.url,
            sort:this.sort,
            tieba_type:this.tieba_type,
            img:this.img,
          }
          if(this.publisher=='精选嘉宾'){
            data.content = this.noticeContent
          }
          let loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
          sendEdit(data).then((res)=>{
            if(res.data.code==1){
              this.$message({
                message: '更新成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.back()
              }, 1000);
            }else{
              this.$message(res.data.msg)
            }
            loading.close()
          }).catch((err)=>{
            loading.close()
            this.$message('服务器请求超时')
          });
        },
        getData(){
            var data = {
                tieba_id:this.$route.query.id,
          }
          sendShow(data).then((res)=>{
            if(res.data.code==1){
                this.publisher = res.data.data.publisher
                this.content = res.data.data.content
                this.label = res.data.data.label
                this.img = res.data.data.img
                this.tieba_type = res.data.data.tieba_type
                this.button_type = res.data.data.button_type
                this.sort = res.data.data.sort?res.data.data.sort:99
                this.url = res.data.data.url
                this.status = res.data.data.status
                this.noticeContent = res.data.data.content
                if(this.img!=''){
                    this.imgArr = []
                    let arr = this.img.split(',')
                    for(let i=0;i<arr.length;i++){
                        this.imgArr.push({img:arr[i]})
                    }
                }
            }else{
              this.$message(res.data.msg)
            }
            this.showData = true
          }).catch((err)=>{
            this.$message('服务器请求超时')
          });
        }
      },
      mounted(){
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .container{
    width: 100%;
    display: flex;
    overflow: hidden;
    .righCont{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 15px;
      height: 100%;
      width: 10px;
      background-color: #F4F8FF;
      .content{
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        overflow: auto;
        .setCont{
          width: 100%;
          padding: 20px;
          box-sizing: border-box;
          background-color: #fff;
          .mainTop{
            display: flex;
            margin-bottom: 25px;
            align-items: center;
            justify-content: space-between;
            .mainTitle{
              font-size: 14px;
              font-weight: bold;
            }
          }
          .formCont{
            width: 800px;
          }
        }
      }
    }
}
  </style>
  